<template>
    <el-dialog width="1100px" title="二要素验证" :visible.sync="dialogVisible" :close-on-click-modal="false">
       
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-form-item prop="name" label="基本信息" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                <el-input v-model="dynamicValidateForm.name" placeholder="请输入姓名"/>
                <el-input v-model="dynamicValidateForm.mobile" placeholder="请输入手机号"></el-input>
                <el-button @click="search(9)">查询</el-button>
                <el-tag style="margin-left: 10px;width:70px;text-align: center;font-size: 14px;" :type="result=='一致'?'success':'danger' ">{{result}}</el-tag>
            </el-form-item>
            <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'基本信息' + ++index" :key="domain.key">
                <el-input v-model="domain.value" placeholder="请输入姓名"></el-input>
                <el-input v-model="domain.value1" placeholder="请输入手机号"></el-input>
                <el-button @click="search(index)">查询</el-button>
                <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                <el-tag style="margin-left: 10px;width:70px;text-align: center;font-size: 14px;" :type="result=='一致'?'success':'danger' ">{{domain.result}}</el-tag>
            </el-form-item>
            <el-form-item>
                <el-button @click="addDomain">新增信息</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="cert_name" label="姓名" width="">
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" width="">
          </el-table-column>
          <el-table-column prop="agree_text" label="查询结果">
            <template slot-scope="scope">
                <el-tag style="margin-left: 10px;width:70px;text-align: center;font-size: 14px;" :type="scope.row.agree_text=='一致'?'success':'danger' ">{{scope.row.agree_text}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="cancle">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import { getNetwork,getNetworkDetail } from '@/api/order'
export default {
    props: {
        orderId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            tableData:[],
            dynamicValidateForm: {
                domains: [{
                    value: '',
                    value1:'',
                    result:'查询结果'
                }],
                name: '',
                mobile:'',
                order_id:''
            },
            dialogVisible: false,
            result:'查询结果'
        }
    },
    watch: {
        dialogVisible(val) {
            console.log(val);
            if (val) {
                this.getDetail()
            } else {
                this.$refs['ruleForm'].resetFields()
            }
        }
    },
    methods: {
        getDetail(){
            getNetworkDetail(this.orderId).then(res=>{
                this.tableData=res
               })
        },
        search(item){
            console.log(item,'333');
            if(item==9){
                if(this.dynamicValidateForm.name==''||this.dynamicValidateForm.mobile==''){
                    this.$message({
                        message: '请检查表单错误',
                        type: 'error'
                    })
                }else{
                    let data={
                        cert_name: this.dynamicValidateForm.name,
                        mobile:this.dynamicValidateForm.mobile,
                        orderId:this.orderId
                    }
                    getNetwork(data).then(res=>{
                        this.result=res
                    })
                    this.getDetail()
                }
            }else{
                if(this.dynamicValidateForm.domains[item].value==''||this.dynamicValidateForm.domains[item].value1==''){
                    this.$message({
                        message: '请检查表单错误',
                        type: 'error'
                    })
                }else{
                    let data={
                        cert_name: this.dynamicValidateForm.domains[item].value,
                        mobile:this.dynamicValidateForm.domains[item].value1,
                        orderId:this.orderId
                    }
                    getNetwork(data).then(res=>{
                        this.dynamicValidateForm.domains[item].result=res
                    })
                    this.getDetail()
                }
            }
        },
        removeDomain(item) {
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if (index !== -1) {
                this.dynamicValidateForm.domains.splice(index, 1)
            }
        },
        addDomain() {
            this.dynamicValidateForm.domains.push({
                value: '',
                result:'查询结果',
                key: Date.now()
            });
        },
        submitForm(){
            this.dynamicValidateForm.name=''
            this.dynamicValidateForm.mobile=""
            this.$refs['dynamicValidateForm'].resetFields();
            this.dialogVisible=false
        },
        cancle(){
            this.dynamicValidateForm.name=''
            this.dynamicValidateForm.mobile=""
            this.$refs['dynamicValidateForm'].resetFields();
            this.dialogVisible=false 
        }
    }
}
</script>
  
<style lang="scss" scoped></style>
  